import React, { useState } from "react";
import "./index.css";

const initSeatDatas = Array.from({ length: 50 }, (_, index) => {
  return {
    id: `D${index + 1}`,
    status:
      index === 0 || index === 1 || index === 31 || index === 48
        ? "selected"
        : index % 3 === 0
        ? "booked"
        : "avaibled",
  };
});

function Index() {
  const [seatlist, setSeatList] = useState(initSeatDatas);
  const price = 140;
  const handleToClick = (id) => {
    setSeatList((pre)=>{
      return pre.map((item)=>{
        if(item.id===id && item.status!=="booked"){
          return {
            ...item,
            status:item.status==="avaibled" ? "selected" :"avaibled"
          }
        }
        return item
      })
    })
  };
  return (
    <div>
      <div className="seatItem">
        {seatlist.map((item, ind) => (
          <div
            key={ind}
            onClick={() => handleToClick(item.id)}
            className={`seatItem-box seat-dot-${item.status}`}
          >
            {item.status === "selected" && item.id}
          </div>
        ))}
      </div>
    </div>
  );
}

export default Index;
